<template>
    <view class="car-count">
        <view class="car-list" v-for="(item, shopIndex) in carList" :key="item.shop_id">
            <view class="shop-mes clearfix">
                <view class="name-mes centerboth">
                    <view class="btn centerboth" style="margin-right: 15upx;margin-top: 10upx;">
                        <image class="car-unsel" src="https://daiyue.gzzhenyi.net/static/index/car-sel.svg"
                            v-if="item.selected == true" @click="selShop(shopIndex)"></image>
                        <image class="car-unsel" src="https://daiyue.gzzhenyi.net/static/index/car-unsel.svg" v-else
                            @click="selShop(shopIndex)" />
                    </view>
                    <view class="shop-name" @click="toShop(item.shop_id)">{{ item.shop_name }}</view>
                    <van-icon name="arrow" color="#999999" />
                </view>
            </view>
            <view class="list" v-for="(itm, gIndex) in item.glist" :key="itm.id">
                <view class="btn centerboth">
                    <image class="car-unsel" src="https://daiyue.gzzhenyi.net/static/index/car-sel.svg"
                        v-if="itm.selected == true" @click="selThis(shopIndex, gIndex)">
                    </image>
                    <image class="car-unsel" src="https://daiyue.gzzhenyi.net/static/index/car-unsel.svg" v-else
                        @click="selThis(shopIndex, gIndex)" />
                </view>
                <image class="car-img" @click="toGoods(itm.goods_id)" v-if="itm.thumbnail"
                    :src="baseUrl + itm.thumbnail" mode="cover"></image>
                <image class="car-img" @click="toGoods(itm.goods_id)" v-else :src="baseUrl + itm.image" mode="cover">
                </image>
                <view class="car-mes centerboth">
                    <view class="mes-box">
                        <view style="display: flex;justify-content: space-between;align-items: center;">
                            <view class="g-name line2" @click="toGoods(itm.goods_id)">{{ itm.title }} </view>
                            <van-icon name="delete-o" color="red" @click="delThis(itm.id, itm.goods_id)" />
                        </view>


                        <view class="gz-box" @click="toGoods(itm.goods_id)"><text>{{ itm.sn }}</text><van-icon
                                style="margin-left: 5upx;" name="arrow-down" /></view>
                        <view class="price-change-num clearfix">
                            <view class="price" v-if="groupId > 0">
                                <text class="yj-price">￥{{ itm.vip_price }}</text>
                                <span class="price_line">￥{{ itm.market_price }}</span>
                            </view>
                            <view class="price" v-else>
                                <text class="yj-price">￥{{ itm.market_price }}</text>
                                <!-- <span class="price_line">￥{{ itm.lowest_price }}</span> -->
                            </view>
                        </view>
                        <van-stepper class="stepper" button-size="20" input-width="30upx" :disable-input="true"
                            :value="itm.number" :min="1" :disable-plus="itm.stock == 0 ? true : false" :max="itm.stock"
                            @plus.stop="changeNum(itm.number, 1, itm.id, itm.goods_id, item.shop_id, itm.stock)"
                            @minus.stop="changeNum(itm.number, 0, itm.id, itm.goods_id, item.shop_id, itm.stock)" />
                    </view>
                </view>
            </view>
        </view>
        <view class="car-bottom-btn" v-if="carList.length > 0">
            <view class="car-bottom-box">
                <view class="all-sel-btn" @click="allSelBtn">
                    <view style="margin-right: 10upx; margin-top: 10upx;">
                        <image class="car-unsel" src="https://daiyue.gzzhenyi.net/static/index/car-sel.svg"
                            v-if="allSel == true"></image>
                        <image class="car-unsel" src="https://daiyue.gzzhenyi.net/static/index/car-unsel.svg" v-else />
                    </view>
                    全选
                </view>
                <view class="all-amount">
                    <view class="all-amount-price">
                        已选{{ allNumber }}件，合计：<span>{{ allAmount }}元 </span>
                    </view>
                    <view class="all-amount-box" v-if="discounts != 0">优惠减：<span>￥{{ discounts }}</span></view>
                </view>
                <view class="js-btn-centerboth" @click="jsCars">
                    立即结算
                </view>
            </view>
        </view>

    </view>
</template>
<script>
import vanStepper from "@/wxcomponents/vant/stepper/index"
import baseUrl from "@/api/baseUrl";
import { mapMutations } from "vuex";
export default {
    components: {
        vanStepper
    },
    props: {
        carList: {
            type: Array,
            default() {
                return []
            }
        },
        //会员
        groupId: {
            type: Number,
            default: 0
        },
        allSel: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            baseUrl,
            maskTitle: '',
            // allSel: false,
            allAmount: '0.00',
            allNumber: 0,
            delIds: '',//要删除的购物车id
            btnType: 0,//0删除  1结算
            discounts: '0.00', //优惠金额

        };
    },
    mounted() {
        this.getAllMount();
    },
    created() {

    },
    computed: {

    },
    methods: {
        ...mapMutations('commodity', ['saveAddOrder']),
        toShop(id) {
            uni.navigateTo({
                url: `/pages/storeDetails/sotreDetails/sotreDetails?id=${id}`
            })
        },
        toGoods(id) {
            uni.navigateTo({
                url: `/long/productDetail/productDetail?id=${id}`
            })
        },
        confirm: function () {//确定按钮
            var that = this;
            console.log('您点击了确定按钮');
            if (that.btnType == 0) {
                that.$emit('delbtn', that.delIds, that.carList);
            } else {
                let ids = that.getCarIds();
                this.$emit('jsbtn', ids)
            }
        },
        cancel: function () {//取消按钮
            console.log('您点击了取消按钮');
        },
        jsCars() {
            this.btnType = 1;
            let array = []
            this.carList.map(item => {
                let list = []
                item.glist.map(itm => {
                    if (itm.selected == true) {
                        list.push(itm)
                    }
                })
                if (list.length > 0) {
                    array.push({
                        shop: item,
                        selected: list,
                        remarks: ''
                    })
                }

            })
            if (array.length == 0) {
                uni.showToast({
                    title: '请选择要结算的商品',
                    icon: 'none'
                })
                return
            }
            this.saveAddOrder(array)
            uni.navigateTo({
                url: `/long/orderForm/orderForm`
            })

        },

        delThis(id, goods_id) {
            uni.showModal({
                title: '提示',
                content: '确定删除该商品吗？',
                success: (res) => {
                    if (res.confirm) {
                        this.$emit('delThis', id, goods_id)
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });

        },
        selThis: function (shopIndex, gIndex) { //选择商品
            var that = this;
            let carList = that.carList;
            if (carList[shopIndex].glist[gIndex].selected == false) {
                carList[shopIndex].glist[gIndex].selected = true;
            } else {
                carList[shopIndex].glist[gIndex].selected = false;
            }
            for (let i = 0; i < carList.length; i++) {
                var indexNum = 0;
                for (let k = 0; k < carList[i].glist.length; k++) {
                    if (carList[i].glist[k].selected == false) {
                        carList[i].selected = false;
                    } else {
                        indexNum = indexNum + 1;
                        if (indexNum > 0 && carList[i].glist.length == indexNum) {
                            carList[i].selected = true;
                        }
                    }
                }
            }

            that.setAllSel();
            that.$emit('selGoods', carList);
        },
        selShop: function (shopIndex) {
            var that = this;
            let carList = that.carList;
            if (carList[shopIndex].selected == false) {
                carList[shopIndex].selected = true;
                for (let i = 0; i < carList[shopIndex].glist.length; i++) {
                    carList[shopIndex].glist[i].selected = true;
                }
            } else {
                carList[shopIndex].selected = false;
                for (let i = 0; i < carList[shopIndex].glist.length; i++) {
                    carList[shopIndex].glist[i].selected = false;
                }
            }
            that.setAllSel();
            that.$emit('selShop', carList);
        },
        setAllSel: function () {//是否全选
            let shopNum = 0;
            for (let i = 0; i < this.carList.length; i++) {
                if (this.carList[i].selected == true) {
                    shopNum = shopNum + 1;
                }
            }
            if (shopNum == this.carList.length && shopNum > 0) {
                // this.allSel = true;
                this.$emit('allSel', true);
            } else {
                // this.allSel = false;
                this.$emit('allSel', false);
            }
            this.getAllMount();
        },
        allSelBtn() {//全选
            // var that = this;
            // this.allSel = !this.allSel;
            this.$emit('allSel', this.allSel ? false : true);
            var carList = this.carList;
            for (let i = 0; i < carList.length; i++) {
                for (let k = 0; k < carList[i].glist.length; k++) {
                    if (!this.allSel) {
                        carList[i].glist[k].selected = true;
                        carList[i].selected = true;
                    } else {
                        carList[i].selected = false;
                        carList[i].glist[k].selected = false;
                    }
                }
            }
            this.$emit('allSelBtn', carList);
            this.getAllMount();
        },
        getAllMount: function (carList) { //计算选中总价
            var that = this;
            let allPrice = 0; // 折扣后的总价
            let originalPrice = 0; // 原价总价
            var selNum = 0;
            if (!carList) {
                carList = that.carList;
            }
            // 遍历所有商品并计算原价和折扣后的价格
            for (let i = 0; i < carList.length; i++) {
                for (let k = 0; k < carList[i].glist.length; k++) {
                    if (carList[i].glist[k].selected == true) {
                        selNum = selNum + carList[i].glist[k].number;
                        let ppg = that.groupId > 0 ? carList[i].glist[k].vip_price : carList[i].glist[k].market_price;
                        // 计算原价
                        originalPrice += (carList[i].glist[k].number * ppg);
                        // 计算折扣价
                        let price = carList[i].glist[k].discounts ? carList[i].glist[k].discounts : ppg;
                        allPrice += (carList[i].glist[k].number * price);
                    }
                }
            }

            // 计算总折扣金额
            let totalDiscount = (originalPrice - allPrice);

            // 确保总折扣金额非负
            allPrice = Math.max(0, allPrice);

            that.allNumber = selNum;
            that.allAmount = allPrice.toFixed(2);
            that.discounts = totalDiscount.toFixed(2);
        },
        getCarIds: function () { //获取要结算的商品
            var that = this;
            var carList = that.carList;
            var haveSel = [];
            for (let i = 0; i < carList.length; i++) {
                for (let k = 0; k < carList[i].glist.length; k++) {
                    if (carList[i].glist[k].selected == true) {
                        haveSel.push(carList[i].glist[k].id);
                    }
                }
            }
            if (haveSel.length == 0) {
                uni.showToast({
                    title: '请选择要结算的商品',
                    icon: 'none'
                })
                return false;
            }
            let cartIds = haveSel.join(',');
            return cartIds;
        },
        changeNum(number, type, id, goods_id, shop_id, stock) {//适用于根据数量改变购物车
            if (type == 1) {
                if (stock > 0) {
                    this.$emit('changeNum', number + 1, id, type, goods_id, shop_id);
                } else {
                    uni.showToast({
                        title: '库存不足',
                        icon: 'none'
                    })
                    return false;

                }
            } else {
                this.$emit('changeNum', number == 1 ? 1 : (number == 0 ? 1 : number - 1), id, type, goods_id, shop_id);
            }
        }
    }
}
</script>
<style lang="less">
::v-deep.van-stepper__input--disabled {
    color: #000 !important;
}
</style>
<style scoped>
.input-class {
    background-color: #2A2A2A;
}

.car-unsel {
    width: 30upx;
    height: 30upx;

}

.car-count {
    padding: 30upx;
    position: relative;
}

.shop-name {
    font-size: 30upx;
    color: #333333;
    max-width: 300upx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 10upx;
}

.manage-btn {

    height: 75upx;
    background: #FFFFFF;
    text-align: right;
}

.manage-btn text {
    font-size: 30upx;
    color: #FF6200;
    line-height: 75upx;
    padding: 0 24upx;
}

.name-mes {
    display: flex;
    align-items: center;
    grid-column: 15upx;
}


.all-sel-btn {
    width: 100upx;
    height: 100%;
    font-size: 24upx;
    color: #5C5C5C;
    align-items: center;
    display: flex;
    margin-left: 15upx;
    /* float: left; */
}

.all-sel-btn .iconfont {
    margin-right: 10upx;
    color: #FF6200;
}

.car-list {
    background: #FFFFFF;
    box-shadow: 0px 2px 8px 0px rgba(205, 205, 205, 0.2031);
    border-radius: 15px;
    opacity: 1;
    padding: 5upx 24upx 0 10upx;
    margin-bottom: 20upx;
}

.car-list .list {

    /* padding: 20upx 20upx 20upx 0; */
    display: flex;
    border-bottom: 1px solid #F5F5F5;
    align-items: center;

}

.car-list .list:nth-child(1) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.car-list .list:nth-last-child(1) {
    margin: 0;
}

.stepper {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
}

.car-list .list .btn {
    width: 70upx;
    height: 190upx;
    justify-content: center;
    align-items: center;
    display: flex;
}

.car-list .list .btn .iconfont {
    color: #FF6200;
    font-size: 38upx;
}

.car-list .list .car-img {
    width: 196upx;
    height: 147upx;
    border-radius: 10upx;
    background-color: #fff;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.06);
}

.car-list .list .car-mes {
    flex: 1;
    margin-left: 20upx;
    position: relative;
    padding-bottom: 20upx;
}

.car-list .g-name {
    font-size: 30upx;
    color: #333333;
    margin-bottom: 10upx;
    /* height: 38upx; */
}



.car-list .gz-box {
    font-size: 20upx;
    color: #5C5C5C;
    background-color: #F6F6F6;
    padding: 10upx;
    display: inline-block;
    border-radius: 6px;

}


.car-list .mes-box .yj-price {
    font-size: 22upx;
    color: #FF6200;
}

.price_line {
    text-decoration: line-through;
    margin-left: 10upx;
    font-size: 20upx;
    color: #CCCCCC;
}

.car-list .price .num {
    color: #2a2a2a;
    font-size: 28upx;
    font-weight: normal;
    float: right;
}

.car-list .num-box {
    float: right;
}

.car-list .num-box .iconfont {
    font-size: 50upx;
    color: #999999;
}

.car-list .num-box view {
    width: 60upx;
    text-align: center;
    height: 50upx;
    line-height: 50upx;
    font-size: 30upx;
    color: #2A2A2A;
    margin: 0 10upx;
}


.car-bottom-btn {
    position: fixed;
    width: 100%;
    height: 120upx;
    background: #FFFFFF;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    box-shadow: 0px -5px 10px -5px #d0d0d0;
    border-bottom: 1px solid #F4F4F4;
}

.all-amount {
    color: #5C5C5C;
    font-size: 24upx;
    margin: 0 23upx;
    width: calc(40vh - 130upx);
}

.all-amount-price {
    margin-bottom: 5upx;
}

.all-amount-price span {
    font-size: 30upx;
    color: #FF6200;
    font-weight: bold;
}

.car-bottom-box {
    padding: 20upx;
    display: flex;
    align-items: center;

}

.car-bottom-btn .all-cost {
    margin-right: 10upx;
}

.car-bottom-btn .all-cost .icon {
    font-size: 28upx;
    margin-top: 2upx;
}

.car-bottom-btn text {
    color: #ff5621;
    font-size: 38upx;
    line-height: 80upx;
}



.del-btn {
    background: red;
    color: #FFFFFF;
}

.js-btn-centerboth {
    background-color: #FF6200;
    border-radius: 35px;
    color: #fff;
    font-size: 30upx;
    font-weight: normal;
    line-height: 70upx;
    padding: 4upx 15upx;
    width: 160upx;
    height: 70upx;
    text-align: center;
    display: inline-block;
}

.shop-mes {
    padding: 20upx 20upx 0 20upx;
    background: #FFFFFF;
}

.shop-mes .iconfont {
    font-size: 38upx;
    margin-right: 20upx;
    color: #FF6200;
}
</style>
